<template>
  <div>
    <div class="issuer main">
      <div class="title hover">同商家书店</div>
      <template v-for="(item, index) in bookList">
        <div
          class="booklist"
          :ref="index == 0 ? 'booklist' : ''"
          :key="item.bookName + index"
          @click="toInfo(item.bookId)"
        >
          <div class="imgB">
            <img
              class="bookImg"
              width="120"
              :src="item.coverPhoto"
              :alt="item.bookName"
            />
          </div>
          <div class="bookname">{{ item.bookName }}</div>
          <div class="price">{{ item.price }}</div>
          <div class="cl ra">
            <i class="hover el-icon-star-off"></i>
            <i class="hover el-icon-shopping-cart-2"></i>
            <i class="hover buy">购买</i>
          </div>
        </div>
      </template>
    </div>
    <div class="guessLike main">
      <div class="title hover">猜你喜欢</div>
      <template v-for="(item, index) in bookList">
        <div
          class="booklist"
          :ref="index == 0 ? 'booklist' : ''"
          :key="item.bookName + index"
          @click="toInfo(item.bookId)"
        >
          <div class="imgB">
            <img
              class="bookImg"
              width="120"
              :src="item.coverPhoto"
              :alt="item.bookName"
            />
          </div>
          <div class="bookname">{{ item.bookName }}</div>
          <div class="price">{{ item.price }}</div>
          <div class="cl ra">
            <i class="hover el-icon-star-off"></i>
            <i class="hover el-icon-shopping-cart-2"></i>
            <i class="hover buy">购买</i>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookList: [],
    };
  },
  mounted() {
    this.bookList = [];
    for (let i = 0; i < 2; i++) {
      this.bookList.push({
        bookName: "java",
        bookId: 0,
        coverPhoto:
          "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        price: 9.9,
        author: "作者",
      });
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 10px;
  border: 1px solid lightgray;
  .title {
    position: relative;
    font-weight: 600;
    color: lightslategray;
  }
  .title::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 2px solid lightslategray;
    border-right: 2px solid lightslategray;
    transform: rotate(45deg);
    top: calc(50% - 2px);
    right: 30px;
  }
  .booklist:hover {
    background: lightblue;
  }
  .booklist {
    margin-top: 20px;
    width: 140px;
    height: 200px;

    background: rgb(182, 178, 178);
    .imgB {
      width: 140px;
      height: 100px;
      padding: 10px;
      // background: rgb(238, 132, 132);
      .bookImg {
        max-width: 120px;
        max-height: 120px;
      }
    }
    .bookname {
      padding-left: 10px;
      padding-right: 10px;
      height: 40px;
      // background: rgb(91, 81, 81);
    }
    .price {
      // background: rgb(191, 185, 185);
      text-align: center;
      color: red;
      line-height: 2;
    }
    // .cl {
    //   // margin-top:10px;
    // }
  }
}
</style>